<template>
  <div class="number-container">
    <!-- 减 1 的按钮 -->
    <button type="button" class="btn" @click="sub">-</button>
    <!-- 购买的数量 -->
    <span class="number-box">{{ number }}</span>
    <!-- 加 1 的按钮 -->
    <button type="button" class="btn" @click="add">+</button>
  </div>
</template>

<script>
import { mapMutations } from 'vuex'
import bus from '@/eventBus.js'
export default {
  props: {
    id: {
      type: Number,
      required: true,
    },
    // 接收到的 num 数量值
    num: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      number: this.num,
    }
  },
  methods: {
    ...mapMutations('m_cart', ['updateGoodsCount']),
    add() {
      let num = ++this.number
      const obj = { id: this.id, goods_count: num }
      bus.emit('share', obj)
    //   console.log(obj)
      this.updateGoodsCount(obj)
    },
    sub() {
      if (this.number - 1 === 0) return
      let num = --this.number
      const obj = { id: this.id, goods_count: num }
      bus.emit('share', obj)
      //  console.log(obj)
         this.updateGoodsCount(obj)
    },
  },
}
</script>
<style lang="less" scoped>
.number-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  .btn {
    width: 0.6rem;
    display: flex;
    font-size: 0.6rem;
    align-items: center;
    justify-content: center;
    height: 0.6rem;
    border: none;
  }
  span {
    margin-left: 0.1rem;
    margin-right: 0.1rem;
    font-size: 0.4rem;
  }
}
</style>
